<template>
  <view class="ticket-record-page">
    <!-- 票务记录列表 -->
    <view class="record-list">
      <view class="record-item" v-for="(item, index) in ticketRecords" :key="index">
        <!-- 时间信息 -->
        <text class="record-time">{{ item.time }}</text>
        
        <!-- 游玩项目 -->
        <text class="record-info">游玩项目：{{ item.project }}</text>
        
        <!-- 套票名称 -->
        <text class="record-info">套票名称：{{ item.ticketName }}</text>
        
        <!-- 套票类型 -->
        <text class="record-info">套票类型：{{ item.ticketType }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 票务记录数据
      ticketRecords: [
        {
          time: '2025-10-24 15:00:00',
          project: '淘气堡',
          ticketName: '10次票',
          ticketType: '计次票'
        },
        {
          time: '2025-10-24 15:00:00',
          project: '闸机1',
          ticketName: '100分钟票',
          ticketType: '计时票'
        },
        {
          time: '2025-10-24 15:00:00',
          project: '闸机1',
          ticketName: '月票',
          ticketType: '期限票'
        },
        {
          time: '2025-10-24 15:00:00',
          project: '闸机1',
          ticketName: '100分钟票',
          ticketType: '计时票'
        }
      ]
    };
  },
  mounted() {
  	uni.setNavigationBarTitle({
  		title: this.$t('title.ticketCheckRecord')
  	});
  },
};
</script>

<style scoped>
.ticket-record-page {
  min-height: 100vh;
  background-color: #ffffff;
  padding-top: 10px; /* 顶部留白 */
}

/* 记录列表容器 */
.record-list {
  padding: 0 16px; /* 左右边距 */
}

/* 单条记录样式 */
.record-item {
  padding: 18px 0;
  border-bottom: 1px solid #f5f5f5; /* 分隔线 */
}

/* 最后一条记录去掉底部边框 */
.record-item:last-child {
  border-bottom: none;
}

/* 时间样式（突出显示） */
.record-time {
  display: block;
  font-size: 16px;
  color: #333333;
  font-weight: 500;
  margin-bottom: 12px;
}

/* 信息项样式 */
.record-info {
  display: block;
  font-size: 14px;
  color: #666666;
  margin-bottom: 8px;
}

/* 最后一条信息项去掉底部间距 */
.record-info:last-child {
  margin-bottom: 0;
}
</style>